<template>
  <view class="content">
    <!-- #ifdef APP-PLUS || H5 -->
    <roc-navbar :title="pageTitle" rightIcon="search" @rightClick="searchShow = true"></roc-navbar>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <roc-navbar :title="pageTitle"></roc-navbar>
    <!-- #endif -->
    <!-- 内容 -->
    <view class="u-p-20">
      <!-- 表格展示 -->
      <uni-table stripe :loading="loading" v-show="$store.state.app.listViewType === 'table'">
        <uni-tr>
          <uni-th align="center">id</uni-th>
          <uni-th align="center">用户名</uni-th>
          <uni-th align="center">密码</uni-th>
          <uni-th align="center">用户昵称</uni-th>
          <uni-th align="center">用户头像</uni-th>
          <uni-th align="center">添加时间</uni-th>
          <uni-th align="center">编辑时间</uni-th>
          <uni-th align="center" v-if="hasPermi(['RocUser.edit', 'RocUser.del'])">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="row in tableList" :key="row.id">
          <uni-td align="center">{{ row.id }}</uni-td>
          <uni-td align="center">{{ row.username }}</uni-td>
          <uni-td align="center">{{ row.password }}</uni-td>
          <uni-td align="center">{{ row.nickname }}</uni-td>
          <uni-td align="center">{{ row.headimg }}</uni-td>
          <uni-td align="center">{{ row.addtime }}</uni-td>
          <uni-td align="center">{{ row.edittime }}</uni-td>
          <uni-td align="center" class="table-btn" v-if="hasPermi(['RocUser.edit', 'RocUser.del'])">
            <text class="text-primary" @click="handleEdit(row)" v-if="hasPermi(['RocUser.edit'])">修改</text>
            <text class="text-error" @click="handleDelete(row)" v-if="hasPermi(['RocUser.del'])">删除</text>
          </uni-td>
        </uni-tr>
      </uni-table>
      <!-- 列表展示（需要自行提取显示字段!!!） -->
      <view class="roc-list" v-show="$store.state.app.listViewType == 'list'">
        <view class="list-item u-p-20" v-for="(row, index) in tableList" :key="row.id">
          <view class="top">
            <view class="area1">
              <text>{{ row.id }}</text>
            </view>
            <view class="area2">{{ row.id }}</view>
          </view>
          <view class="center">
            <view class="area3">id：{{ row.id }}</view>
          </view>
          <view class="bottom">
            <view class="area4">创建时间：{{ row.create_time }}</view>
            <view class="area4">修改时间：{{ row.update_time }}</view>
          </view>
          <view class="btn-box" v-if="hasPermi(['RocUser.edit', 'RocUser.del'])">
            <u-button type="primary" size="mini" @click="handleEdit(row)" v-if="hasPermi(['RocUser.edit'])">修改</u-button>
            <u-button type="error" size="mini" @click="handleDelete(row)" v-if="hasPermi(['RocUser.del'])">删除</u-button>
          </view>
        </view>
      </view>
      <!-- 分页 -->
      <uni-pagination v-if="total > 0" class="u-m-t-20" :total="total" v-model="queryParams.page" :pageSize="queryParams.limit" @change="getList" />
      <!-- 内容为空 -->
      <u-empty marginTop="16vh" :show="!total" mode="data" text="暂无数据~"></u-empty>
    </view>
    <!-- 右下角按钮操作 -->
    <view class="side-btn-box">
      <!-- #ifndef APP-PLUS || H5 -->
      <view class="side-btn" @click="searchShow = true">
        <roc-icon-plus name="search" color="#fff" size="20"></roc-icon-plus>
      </view>
      <!-- #endif -->
      <view class="side-btn" @click="$store.commit('app/LIST_SWITCH_VIEW')">
        <roc-icon-plus name="arrow-right-arrow-left" color="#fff" size="20"></roc-icon-plus>
      </view>
      <view class="side-btn" v-if="hasPermi(['RocUser.add'])" @click="handleAdd">
        <roc-icon-plus name="add" color="#fff" size="22"></roc-icon-plus>
      </view>
    </view>
    <!-- 回到顶部 -->
    <u-back-top
      :scroll-top="scrollTop"
      :top="50"
      :bottom="60"
      :iconStyle="{ color: '#fff', fontSize: '20px', fontWeight: 'bold' }"
      :customStyle="{ backgroundColor: 'rgba(60, 156, 255, 0.8)' }"
    ></u-back-top>
    <!-- 模态框 -->
    <u-modal :show="modal.show" :title="modal.title" :content="modal.content" :showCancelButton="true" @confirm="handleModalConfirm" @cancel="modal.show = false"></u-modal>
    <!-- 查询弹框 -->
    <u-popup class="search-popup" :show="searchShow" @close="searchShow = false" mode="bottom" round="10" :closeable="true" :closeOnClickOverlay="false">
      <view class="title">搜索</view>
      <scroll-view class="popup-cont" scroll-y="true">
        <view class="u-p-20">
          <!-- 查询条件 -->
          <u-form ref="formRef" :model="queryParams" labelPosition="top" label-width="100%">
            <u-form-item label="用户名" prop="username">
              <u-input v-model="queryParams.username" placeholder="用户名"></u-input>
            </u-form-item>
          </u-form>
        </view>
      </scroll-view>
      <view class="btn-box u-p-20">
        <u-button text="重置" shape="circle" @click="resetQuery"></u-button>
        <u-button type="primary" text="确定" shape="circle" @click="handleQuery"></u-button>
      </view>
    </u-popup>
    <!-- 添加编辑弹框 -->
    <AddOrEdit ref="addOrEditRef" @updateList="getList"></AddOrEdit>
  </view>
</template>

<script>
import { cloneDeep } from 'lodash-es'
import { listRocUser, delRocUser } from '@/api/rocUser.js'
import dictMinxin from '@/mixins/dict.js'
import AddOrEdit from './addOrEdit.vue'

export default {
  mixins: [dictMinxin],
  components: {
    AddOrEdit,
  },
  provide() {
    return {
      dictType: this.dictType,
    }
  },
  data() {
    return {
      pageTitle: '用户管理',
      scrollTop: 0,
      queryParams: {
        page: 1,
        limit: 10,
        username: null,
      },
      total: 0,
      loading: false,
      tableList: [],
      currentRow: {},
      // 模态框数据
      modal: {
        flag: '',
        show: false,
        title: '',
        content: '',
      },
      searchShow: false,
    }
  },
  onLoad(options) {
    if (options.pageTitle) this.pageTitle = options.pageTitle
    this.getDictData()
    this.getList()
  },
  methods: {
    /**
     * 字典数据获取
     */
    getDictData() {
    },
    /**
     * 查询 用户管理 列表
     */
    getList() {
      this.loading = true
      const _queryParams = cloneDeep(this.queryParams)
      listRocUser(_queryParams).then(res => {
        // 数据转换
        this.tableList = res.data.rows.map(row => {
          return row
        })
        this.total = res.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 添加按钮操作
     */
    handleAdd() {
      this.$refs['addOrEditRef'].handleAdd()
    },
    /**
     * 编辑按钮操作
     * @param {Object} row
     */
    handleEdit(row) {
      const _row = cloneDeep(row)
      this.$refs['addOrEditRef'].handleEdit(_row)
    },
    /**
     * 删除按钮操作
     * @param {Object} row
     */
    handleDelete(row) {
      this.currentRow = cloneDeep(row)
      this.modal.flag = 'delete'
      this.modal.show = true
      this.modal.title = '系统提示'
      this.modal.content = '确认删除数据？'
    },
    /**
     * 模态框 点击了确认
     */
    handleModalConfirm() {
      if (this.modal.flag === 'delete') {
        // 删除操作
        const _ids = this.currentRow.id
        delRocUser({ ids: _ids }).then(() => {
          this.$u.toast('删除成功')
          this.modal.show = false
          this.getList()
        })
      }
    },
    /**
     * 搜索按钮操作
     */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
      this.searchShow = false
    },
    /**
     * 搜索重置按钮操作
     */
    resetQuery() {
      this.$refs['formRef'].resetFields()
      this.queryParams.username = null
      this.handleQuery()
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onPullDownRefresh() {
    this.queryParams.page = 1
    this.getDictData()
    this.getList()
    uni.stopPullDownRefresh()
  },
}
</script>

<style lang="scss" scoped>
// 查询弹窗
.search-popup {
  .title {
    text-align: center;
    padding: 14px 0 5px 0;
    font-size: 16px;
  }
  .popup-cont {
    height: calc(80vh - 120px);
  }
  .btn-box {
    display: flex;
    .u-button {
      width: 46%;
    }
  }
}

// 表格后按钮
.table-btn {
  text + text {
    margin-left: 10px;
  }
}

// 列表形式
.roc-list {
  $titleFontSize: 16px;
  $contFontSize: 14px;
  .list-item {
    margin-top: 20px;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &:nth-child(1) {
      margin-top: 0;
    }
    .top,
    .center,
    .bottom {
      display: flex;
      justify-content: space-between;
    }
    .top {
      padding-bottom: 10px;
      .area1 {
        font-size: $titleFontSize;
      }
      .area2 {
        margin-left: 5px;
      }
    }
    .center {
      flex-wrap: wrap;
      padding-top: 10px;
      padding-bottom: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      .area3 {
        display: flex;
        width: 50%;
        color: #333;
        line-height: 2;
        font-size: $contFontSize;
      }
    }
    .bottom {
      flex-wrap: wrap;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      padding: 10px 0;
      .area4 {
        width: 100%;
        color: #333;
        font-size: $contFontSize;
        margin-bottom: 5px;
      }
    }
    .btn-box {
      display: flex;
      justify-content: flex-end;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      .u-button {
        width: 50px;
        margin: 0;
        & + .u-button {
          margin-left: 8px;
        }
      }
    }
  }
}
.subTable {
  .title {
    text-align: center;
    padding: 14px 0 5px 0;
    font-size: 16px;
  }
  .popup-cont {
    height: calc(90vh - 120px - 88px);
    width: 90vw;
  }
}
</style>
